<template>
	<view>
		<view class="search-history" v-if="!isReady">
			<view class="title-block">
				<view class="title">搜索历史</view>
				<view class="all-search-block">
					<view class="search-icon iconfont icon-gengduo1"></view>
					<view class="text">全部</view>
				</view>
			</view>
			<view class="content">
				<block v-for="(item, index) in historyData" :key="index">
					<view class="search-history-item" @click="searchFun(item)">{{item}}</view>
				</block>
			</view>
			<view class="clear-search iconfont icon-lajitong" @click="clearHistroy">
				清空历史搜索记录
			</view>
		</view>
		<view class = "content" v-else>
			<scroll-view  scroll-y class="list" :style="{'height':swiperHeight+'px'}"
			refresher-enabled
			:refresher-threshold="100"
			:refresher-triggered="triggered"
			@refresherrefresh="onRefresh"
			@scrolltolower="scrolltolower"
			:lower-threshold="100"	>
				<view>
					<block v-for="(topic, topicId) in (topicShareList)" :key="topicId">
						<fun-topic-item @clickTopicItem="clickTopicItem(topic.id)" :topic="topic" class="topicItem"></fun-topic-item>
					</block>
				</view>
				<view class="graphic-list-content"  v-if="topicShareList.length == 0 && isReady">
					<view class="content-none flex-ali-center flex-juscon-center" :style="{'height': noneWrap + 'px'}">
						<view class="none-hit">
							<image class="content-none-img" src="../../static/imgs/none.png" mode="widthFix"/>
							<view class="content-none-text">好像被外星人掳走了~</view>
						</view>
					</view>
				</view>
				<view class="bottom-loading" v-if="topicShareList.length > 0 ">{{bottomLoading}}</view>
			</scroll-view>
			
		</view>
		<!-- 弹出提示框 -->
		<uni-popup ref="popupClear" type="center" animation @change="popuChange">
			<view class="popup-content-clear">
				<view class="popup-title">删除</view>
				<view class="popu-prompt">确定要删除所有搜索历史记录？</view>
				<view class="popu-butons">
					<view class="cancel-btn" @click="cancelPopuClear">取消</view>
					<view class="confirm-btn" @click="confirmPopuClear">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import GraphicItem from '@/components/funScrollView/Graphic-item.vue';
	import {TheFun} from '@/model/theFun.js';
	import {User} from '@/model/user.js';
	import {Topic} from '@/model/topic.js';
	import funTopicItem from '@/components/funTopicItem/funTopicItem.vue';
	export default {
		data() {
			return {
				GraphicList:[],
				noneWrap:500,
				swiperHeight:500,
				triggered: false,
				bottomLoading:"上拉加载更多！",
				isReady:false,
				likeClick:false,
				funId:0,
				historyData:[],
				searchValue:'',
				page:1,
				topicShareList:[]
			}
		},
		onNavigationBarButtonTap(e) {
			if(e.index == 0){
				// TODO 取消
			}
		},
		onNavigationBarSearchInputConfirmed(e) {
			// TODO 点击搜索
			if(!e.text){
				return
			}
			console.log(e)
			this.searchValue = e.text
			this.historyData.push(this.searchValue)
			this.getFunList(this.searchValue)
		},
		components:{
			GraphicItem,
			funTopicItem
		},
		async onLoad() {
			let res = uni.getSystemInfoSync();
			this.noneWrap = res.windowHeight - uni.upx2px(100)
			this.swiperHeight = res.windowHeight- uni.upx2px(20)
			this.historyData =  this.$utils.getStorage('historyTopicData') || []
			
		},
		onUnload() {
			this.$utils.setStorage('historyTopicData',this.historyData)
		},
		onShow() {
			
		},
		methods:{
			clickTopicItem(id){
				uni.navigateTo({
					url:"../topicDetail/topicDetail",
					success: res => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {id:id})
					}
				})
			},
			async getFunList(keyWord){
				uni.showLoading({
					title:"加载中..."
				})
				let funRes = await Topic.searchTopicList({keyWords:keyWord})
				this.page = 1;
				if(funRes.code != 200){
					uni.showToast({
						icon:'none',
					    title: funRes.message,
					    duration: 2000
					});
					return
				}
				this.isReady = true
				this.topicShareList = funRes.data.data
				if(this.page * 15 < funRes.data.count){
					this.isNoData = false
				}else{
					this.isNoData = true
					this.bottomLoading = "我也是有底线的...."
				}
			},
			async searchFun(keyWord){
				this.searchValue = keyWord
				let webview = this.$mp.page.$getAppWebview();
				webview.setTitleNViewSearchInputText(keyWord)
				this.getFunList(keyWord)
			},
			async onRefresh() {
				if (this._freshing) return;  
				this._freshing = true;  
				if (!this.triggered)//界面下拉触发，triggered可能不是true，要设为true  
					this.triggered = true;
				this.bottomLoading = "上拉加载更多"
				this.isNoData = false
				this.page = 1;
				let funRes = await await Topic.searchTopicList({keyWords:this.searchValue})
				if(funRes.code != 200){
					this.hideRefresh()
					uni.showToast({
						icon:'none',
					    title: funRes.message,
					    duration: 2000
					});
					return
				}
				this.topicShareList = funRes.data.data
				if(this.page * 15 < funRes.data.count){
					this.isNoData = false
				}else{
					this.isNoData = true
					this.bottomLoading = "我也是有底线的...."
				}
				this.hideRefresh()
			},
			hideRefresh(){
				setTimeout(() => {
					this.triggered = false;//触发onRestore，并关闭刷新图标  
					this._freshing = false;
				}, 500)  
			},
			async scrolltolower(){
				// console.log(this.isNoData || this.isLoading)
				if (this.isLoading || this.isNoData) return;
				this.isLoading = true;  
				this.bottomLoading = "加载中..."
				this.page += 1
				let funRes = await await Topic.searchTopicList({page:this.page,keyWords:this.searchValue})
				if(funRes.code != 200){
					this.hideRefresh()
					uni.showToast({
						icon:'none',
					    title: funRes.message,
					    duration: 2000
					});
					return
				}
				this.topicShareList.push(...funRes.data.data)
				if(this.page * 15 < funRes.data.count){
					this.isNoData = false
				}else{
					this.isNoData = true
					this.bottomLoading = "我也是有底线的...."
				}
				// this.$emit("scrolltolower",this.tagIndex)
				console.log("触底")
				this.doenTolower()
			},
			doenTolower(){
				this.isLoading = false;
			},
			tolowerNoData(){
				this.isLoading = false;
				this.isNoData = true
				this.bottomLoading = "我也是有底线的...."
			},
			async forwardFun(id){
				this.$refs.popup.open()
				this.funId = id
			},
			
			clickAvatr(e){
				// this.$emit("clickAvatr",this.graphic)
			},
			
			
			toggle() {
				this.$refs.popup.open()
			},
			hiddenpopup(e){
				this.$refs.popup.showPopup = false
			},
			cancelPopu(){
				this.hiddenpopup()
			},
			popuChange(e){
				console.log(e)
			},
			
			clearHistroy(){
				this.$refs.popupClear.open()
			},
			confirmPopuClear(){
				this.$utils.removeStorage("historyData")
				this.historyData = []
				this.$refs.popupClear.showPopup = false
			},
			cancelPopuClear(){
				this.$refs.popupClear.showPopup = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-history{
		margin: 20rpx;
		.title-block{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			.title{
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				letter-spacing: 5rpx;
			}
			.all-search-block{
				color: #888;
				display: flex;
				align-items: center;
				.search-icon{
					padding: 0 20rpx;
					transform: rotateZ(90deg);
				}
				.text{
					font-size: 24rpx;
				}
			}
			
		}
		.content{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			width: 100%;
			max-height: 400rpx;
			overflow: auto;
			.search-history-item{
				margin: 10rpx 20rpx;
				max-width: 250rpx;
				padding: 20rpx 10rpx;
				line-height: 1;
				font-size: 25rpx;
				background-color: #F2F2F2;
				border-radius: 10rpx;
				
				overflow:hidden; //超出的文本隐藏
				text-overflow:ellipsis; //溢出用省略号显示
				white-space:nowrap; //溢出不换行
			}
		}
		.clear-search{
			width: 300rpx;
			margin: 30rpx auto;
			color: #888888;
			text-align: center;
			font-size: 28rpx;
		}
	}
	.popup-content-clear{
		.popup-title{
			color: red !important;
		}
		.popu-butons{
			.confirm-btn{
				background-color: red !important;
				color: #FFF;
			}
		}
	}
.popup-content,.popup-content-clear{
		background-color: #FFF;
		width: 500rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		.popup-title{
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			color: $fun-theme-color;
			border-bottom: 1rpx #F2F2F2 solid;
		}
		.popu-prompt{
			font-size: 30rpx;
			color: #666666;
			padding: 20rpx 40rpx;
		}
		.popu-butons{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.confirm-btn{
				background-color: $fun-theme-color;
				flex: 1;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom-right-radius: 20rpx;
			}
			.cancel-btn{
				flex: 1;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom-left-radius: 20rpx;
			}
		}
	}
	.content{
		box-sizing: border-box;
		padding: 10rpx;
		.graphic-item{
			margin-bottom: 20rpx;
		}
	}
	.graphic-list-content{
		
		.content-none{
			width: 100vw;
			.none-hit{
				margin-top: -100rpx;
				.content-none-img{
					width: 400rpx;
				}
				.content-none-text{
					text-align: center;
					color: #999999;
					font-size: 14rpx;
				}
			}
		}
	}
	.bottom-loading{
		margin: 15rpx;
		font-size: 26rpx;
		text-align: center;
		color: #999;
	}
</style>
